<script>
import { colorList } from '@/components/SettingDrawer/settingConfig'
import ASwitch from 'ant-design-vue/es/switch'
import AList from 'ant-design-vue/es/list'
import AListItem from 'ant-design-vue/es/list/Item'
import { mixin } from '@/utils/mixin'

const Meta = AListItem.Meta

export default {
    components: {
        AListItem,
        AList,
        ASwitch,
        Meta
    },
    mixins: [mixin],
    data() {
        return {}
    },
    filters: {
        themeFilter(theme) {
            const themeMap = {
                dark: '暗色',
                light: '白色'
            }
            return themeMap[theme]
        }
    },
    methods: {
        colorFilter(color) {
            const c = colorList.find(o => o.color === color)
            return c && c.key
        },

        onChange(checked) {
            if (checked) {
                this.$store.dispatch('ToggleTheme', 'dark')
            } else {
                this.$store.dispatch('ToggleTheme', 'light')
            }
        }
    },
    render() {
        return (
            <AList itemLayout="horizontal">
                <AListItem>
                    <Meta>
                        <a slot="title">风格配色</a>
                        <span slot="description">整体风格配色设置</span>
                    </Meta>
                    <div slot="actions">
                        <ASwitch
                            checkedChildren="暗色"
                            unCheckedChildren="白色"
                            defaultChecked={(this.navTheme === 'dark' && true) || false}
                            onChange={this.onChange}
                        />
                    </div>
                </AListItem>
                <AListItem>
                    <Meta>
                        <a slot="title">主题色</a>
                        <span slot="description">
                            页面风格配色： <a domPropsInnerHTML={this.colorFilter(this.primaryColor)} />
                        </span>
                    </Meta>
                </AListItem>
            </AList>
        )
    }
}
</script>

<style scoped>
</style>
